<template>
	<view class="content">
		<u-navbar :bgColor="bgColor" :fixed="false" title="运营报表" @rightClick="rightClick" :autoBack="true"></u-navbar>

		<view class="container">
			<view class="top row space-between">
				<view class="row_a_c">
					<view class="stime">09.23-09.29</view>
					<image class="xiajian" src="/static/images/xiajian.png"></image>
				</view>
				<view class="typea row center">
					<view class="wxzz center">月</view>
					<view class="xxzz center">周</view>
				</view>
			</view>
		</view>


		<view class="chart-con">
			<view class="chart-wrap">
				<view class="title">
					<view class="ver-line"></view>
					<view class="title-desc">经营数据</text></view>
				</view>
				<view class="ring-chart">
					<l-echart ref="barChart"></l-echart>
				</view>
			</view>
		</view>


		<view class="jritem">
			<view class="jrxf">今日患者消费（元）</view>
			<view class="row_a_c space-between">
				<view class="column_c" style="margin-left: 30rpx;">
					<view class="ys">应收</view>
					<view class="jjee">223.26</view>
				</view>

				<view class="column_c">
					<view class="ys">实收</view>
					<view class="jjee">223.26</view>
				</view>

				<view class="column_c" style="margin-right: 30rpx;">
					<view class="ys">应收</view>
					<view class="jjee">223.26</view>
				</view>
			</view>
		</view>

		<view class="row space-between ccgg">

			<view class="bycg">
				<view class="row_a_c space-between">
					<view class="bycgtitle">本月采购支出（元）</view>
					<u-icon size="16" name="info-circle"></u-icon>
				</view>
				<view class="bymetl">8,250.00</view>
				<view class="row_a_c space-between">
					<view class="bfbb">+ 0.5%</view>
					<view class="jsy">较上月</view>
				</view>
			</view>

			<view class="bycg">
				<view class="row_a_c space-between">
					<view class="bycgtitle">本月采购支出（元）</view>
					<u-icon size="16" name="info-circle"></u-icon>
				</view>
				<view class="bymetl">8,250.00</view>
				<view class="row_a_c space-between">
					<view class="bfbb">+ 0.5%</view>
					<view class="jsy">较上月</view>
				</view>
			</view>

		</view>




		<view class="chart-con gap">
			<view class="chart-wrap">
				<view class="title">
					<view class="ver-line"></view>
					<view class="title-desc">预约人次</text></view>
				</view>
				<view class="line-chart-con">
					<l-echart class="line-chart" ref="lineChart"></l-echart>
				</view>
			</view>
		</view>

		<view class="row space-between ccgg">
			<view class="bycg">
				<view class="row_a_c space-between">
					<view class="bycgtitle">本月采购支出（元）</view>
					<u-icon size="16" name="info-circle"></u-icon>
				</view>
				<view class="bymetl">8,250.00</view>
				<view class="row_a_c space-between">
					<view class="bfbb">+ 0.5%</view>
					<view class="jsy">较上月</view>
				</view>
			</view>
			<view class="bycg">
				<view class="row_a_c space-between">
					<view class="bycgtitle">本月采购支出（元）</view>
					<u-icon size="16" name="info-circle"></u-icon>
				</view>
				<view class="bymetl">8,250.00</view>
				<view class="row_a_c space-between">
					<view class="bfbb">+ 0.5%</view>
					<view class="jsy">较上月</view>
				</view>
			</view>
		</view>


		<view class="jdtitem">
			<view class="row space-between">
				<view class="row_a_c">
					<view class="nxiang"></view>
					<view class="yyysfb">预约医生分布</view>
				</view>
				<view class="zzyyaa row_a_c center">
					<view class="yyymm center">月</view>
					<view class="zzzmm center">周</view>
				</view>
			</view>
			<view>
				<view class="row_a_c space-between bbhh">
					<view class="namet">张三</view>
					<view class="bfbb">25（60.55%）</view>
				</view>
				<u-line-progress :percentage="30" activeColor="#27CCBB"></u-line-progress>
			</view>
			<view>
				<view class="row_a_c space-between bbhh">
					<view class="namet">林娜娜</view>
					<view class="bfbb">25（60.55%）</view>
				</view>
				<u-line-progress :percentage="30" activeColor="#27CCBB"></u-line-progress>
			</view>
			<view>
				<view class="row_a_c space-between bbhh">
					<view class="namet">李平</view>
					<view class="bfbb">25（60.55%）</view>
				</view>
				<u-line-progress :percentage="30" activeColor="#27CCBB"></u-line-progress>
			</view>
			<view>
				<view class="row_a_c space-between bbhh">
					<view class="namet">其他</view>
					<view class="bfbb">25（60.55%）</view>
				</view>
				<u-line-progress :percentage="30" activeColor="#27CCBB"></u-line-progress>
			</view>
		</view>




		<view class="chart-con" style="margin-top: 30rpx;">
			<view class="chart-wrap">
				<view class="title">
					<view class="ver-line"></view>
					<view class="title-desc">预约项目分布</view>
				</view>
				<view class="ring-chart">
					<l-echart ref="ringChart"></l-echart>
				</view>
			</view>
		</view>


		<view class="chart-con" style="margin-top: 30rpx;">
			<view class="chart-wrap">
				<view class="title">
					<view class="ver-line"></view>
					<view class="title-desc">患者来源分布</view>
				</view>
				<view class="ring-chart">
					<l-echart ref="ringChartb"></l-echart>
				</view>
			</view>
		</view>




	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js';
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
	import api_statistics from '@/api/statistics.js';

	export default {
		components: {
			'l-echart': LEchart
		},

		async onShow() {
			this.access_token = uni.getStorageSync('access_token');
			if (!this.access_token) {
				uni.navigateTo({
					url: '/pages/auth/login'
				});
			} else {
				this.statisticsConsumeAmountFuc(); // 消费金额统计
			}
		},

		data() {
			return {
				access_token: null,
				consumeAmountData: [], //消费金额统计
				xfjex: [], //消费金额xxx
				xfjey: [], //消费金额yyy
				bgColor: 'rgba(0, 31, 63, 0)',
				show: false,
				percentage: 30,
			}
		},

		mounted() {
			this.loadBarData();
			this.loadLineData();
			this.loadRingData();
			this.loadRingDatab();
		},

		methods: {

			// 消费金额统计
			async statisticsConsumeAmountFuc() {
				var per = {
					start_date: '2024-10-20',
					end_date: '2024-10-23'
				}
				const res = await api_statistics.statisticsConsumeAmount(per);
				if (res.code == 1) {
					this.consumeAmountData = res.data.list;
					this.xfjex = Object.keys(this.consumeAmountData);
					this.xfjex = this.xfjex.map(date => {
						let parts = date.split('-'); // 按照 '-' 分割
						return `${parts[1]}-${parts[2]}`; // 返回 "月-日"
					});
					this.xfjey = Object.values(this.consumeAmountData);
					this.loadBarData();
				} else {
					this.$util.msg(res.message);
					return;
				}
			},



			loadLineData() {
				//这里请求服务器拿到数据
				let res = {
					//x轴数据
					xData: ['6/11', '6/12', '6/13', '6/14', '6/15', '6/16', '6/17'],
					//y轴数据
					yData: [50, 120, 150, 220, 180, 300, 130]
				}
				//这里option配置参考文档：https://echarts.apache.org/zh/option.html
				let option = {
					xAxis: {
						type: 'category',
						// x轴数据文字颜色
						axisLabel: {
							color: '#a7a7a7'
						},
						// x轴那天坐标轴线的颜色
						axisLine: {
							lineStyle: {
								color: '#f1f1f1',
							}
						},
						//x轴上面刻度线隐藏
						axisTick: {
							show: false,
						},
						//这里是x轴数据
						data: res.xData
					},
					//设置网格
					grid: {
						top: 40,
						bottom: 30,
					},
					//y轴设置
					yAxis: {
						type: 'value',
						//y轴标签文字颜色
						axisLabel: {
							color: '#a7a7a7'
						},
						// y轴分割线设置为虚线
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed'
							}
						}
					},
					//设置提示为点击时
					tooltip: {
						trigger: 'axis',
						triggerOn: 'click',
						formatter: '{b} \n 数据: {c}'
					},
					//设置曲线的颜色
					color: ['#4e9d77'],
					series: [{
						//这里是数据
						data: res.yData,
						type: 'line',
						//设置为平滑，默认为折线
						smooth: true,
					}],
					//设置数据缩放，手指缩放
					// dataZoom:{
					// 		type:'inside',//inside移动端就是手指缩放，slider
					// 		id:'123',
					// }
				};

				this.$refs.lineChart.init(echarts, chart => {
					chart.setOption(option);
				});
			},

			loadBarData() {
				//这里请求服务器得到数据
				let myData = {
					x: this.xfjex,
					y: this.xfjey
				}
				//这里option配置参考文档：https://echarts.apache.org/zh/option.html
				this.$refs.barChart.init(echarts, chart => {
					chart.setOption({
						//设置提示为点击时
						tooltip: {
							trigger: 'axis',
							triggerOn: 'click',
							formatter: '{b} \n 数据: {c}'
						},
						//设置曲线的颜色
						color: ['#27CCBB'],
						grid: {
							left: '1%',
							right: '1%',
							bottom: '1%',
							containLabel: true
						},
						yAxis: [{
							type: 'value'
						}],
						xAxis: [{
							type: 'category',
							data: myData.x,
							axisTick: {
								alignWithLabel: true
							}
						}],
						series: [{
							name: '数量',
							type: 'bar',
							barWidth: '40%', //不设时自适应，可以是绝对值例如 40 或者百分数例如 '60%'。百分数基于自动计算出的每一类目的宽度。
							data: myData.y
						}]
					});

				});
			},

			//加载饼环数据,这里可以去请求服务器获取数据
			loadRingData() {
				//这里请求服务器得到数据
				let data = [{
						name: '手机APP',
						value: 2000
					},
					{
						name: '小程序',
						value: 1500
					},
					{
						name: 'H5网页',
						value: 900
					},
					{
						name: 'PC端',
						value: 300
					},
					{
						name: '其它',
						value: 2001
					}
				];

				//这里option配置参考文档：https://echarts.apache.org/zh/option.html
				this.$refs.ringChart.init(echarts, chart => {
					chart.setOption({
						tooltip: {
							trigger: 'item'
						},
						legend: {
							orient: 'vertical', // 设置图例为竖直排列
							top: '5%',
							left: 'right'
						},
						series: [{
							// name: 'Access From',
							type: 'pie',
							radius: ['40%', '70%'],
							avoidLabelOverlap: false,
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: true,
									fontSize: 40,
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: false
							},
							data: [
								{ value: 1048, name: '口腔检查' },
								{ value: 735, name: '定期复诊' },
								{ value: 580, name: '正畸' },
								{ value: 484, name: '其他' },
							]
						}]
					});
					//默认突出高亮显示，可以放开下面注释
					// chart.dispatchAction({
					// 	type: 'highlight',
					// 	seriesIndex: 0,
					// 	dataIndex: 0
					// });
					//监听图标项点击事件
					chart.on("click", function(e) {
						for (var i = 0; i < data.length; i++) {
							if (i != e.dataIndex) {
								chart.dispatchAction({
									type: 'downplay', //取消高亮显示;
									seriesIndex: 0,
									dataIndex: i
								});
							} else {
								chart.dispatchAction({
									type: 'highlight', //突出高亮显示;
									seriesIndex: 0,
									dataIndex: i
								});
							}
						}
					});
				});
			},


			loadRingDatab() {
				//这里请求服务器得到数据
				let data = [{
						name: '手机APP',
						value: 2000
					},
					{
						name: '小程序',
						value: 1500
					},
					{
						name: 'H5网页',
						value: 900
					},
					{
						name: 'PC端',
						value: 300
					},
					{
						name: '其它',
						value: 2001
					}
				];

				//这里option配置参考文档：https://echarts.apache.org/zh/option.html
				this.$refs.ringChartb.init(echarts, chart => {
					chart.setOption({
						tooltip: {
							trigger: 'item'
						},
						legend: {
							orient: 'vertical', // 设置图例为竖直排列
							top: '5%',
							left: 'right'
						},
						series: [{
							// name: 'Access From',
							type: 'pie',
							radius: ['40%', '70%'],
							avoidLabelOverlap: false,
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: true,
									fontSize: 40,
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: false
							},
							data: [
								{ value: 1048, name: '来源一' },
								{ value: 735, name: '来源二' },
								{ value: 580, name: '来源三' },
								{ value: 484, name: '来源四' },
							]
						}]
					});
					//默认突出高亮显示，可以放开下面注释
					// chart.dispatchAction({
					// 	type: 'highlight',
					// 	seriesIndex: 0,
					// 	dataIndex: 0
					// });
					//监听图标项点击事件
					chart.on("click", function(e) {
						for (var i = 0; i < data.length; i++) {
							if (i != e.dataIndex) {
								chart.dispatchAction({
									type: 'downplay', //取消高亮显示;
									seriesIndex: 0,
									dataIndex: i
								});
							} else {
								chart.dispatchAction({
									type: 'highlight', //突出高亮显示;
									seriesIndex: 0,
									dataIndex: i
								});
							}
						}
					});
				});
			},

		},
	}
</script>

<style lang="scss" scoped>
	.container {
		margin-bottom: 20rpx;
	}


	::v-deep .u-modal__content {
		padding: 12px 25px 25px 25px;
		display: flex;
		justify-content: normal;

	}

	.stime {
		font-weight: 400;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.85);
		margin-left: 30rpx;
		margin-right: 8rpx;
	}

	.xiajian {
		width: 48rpx;
		height: 48rpx;
	}

	.typea {
		width: 160rpx;
		height: 68rpx;
		margin-right: 15rpx;
	}

	.wxzz {
		width: 60rpx;
		height: 52rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.xxzz {
		width: 60rpx;
		height: 52rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 28rpx;
		color: #27CCBB;
	}







	.content {
		width: 100%;
		min-height: 100vh;
		background-color: #f1f3f2;
		padding: 20rpx 0rpx 100rpx;
	}



	.chart-con {
		width: 100%;
		box-sizing: border-box;
		padding: 0rpx 28rpx;

		.chart-wrap {
			width: 100%;
			box-sizing: border-box;
			background-color: #ffffff;
			padding: 32rpx 0rpx;
			border-radius: 20rpx;

			.title {
				box-sizing: border-box;
				width: 100%;
				padding: 0rpx 28rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
			}

			.ver-line {
				height: 30rpx;
				width: 8rpx;
				border-radius: 10rpx;
				background-color: #4e9d77;
			}

			.title-desc {
				font-size: 30rpx;
				color: #222222;
				margin-left: 22rpx;
				font-weight: bold;
			}

			.ring-chart {
				height: 400rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 0rpx 28rpx;
				margin-top: 32rpx;
			}
		}
	}


	.gap {
		margin-top: 30rpx;
	}


	.jritem {
		width: 695rpx;
		height: 196rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		padding: 24rpx 32rpx 32rpx 32rpx;
	}

	.jrxf {
		font-weight: 400;
		font-size: 20rpx;
		color: #7F7F7F;
		margin-bottom: 24rpx;
	}

	.ys {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.85);
	}

	.jjee {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.85);
		margin-top: 5rpx;
	}

	.bycg {
		width: 336rpx;
		height: 192rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 24rpx 32rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}

	.bycgtitle {
		font-weight: 400;
		font-size: 20rpx;
		color: rgba(0, 0, 0, 0.6);

	}

	.ccgg {
		width: 720rpx;
	}

	.bymetl {
		font-weight: 500;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.85);
		margin-top: 12rpx;
		margin-bottom: 12rpx;
	}

	.bfbb {
		font-weight: 400;
		font-size: 24rpx;
		color: #EA4140;
	}

	.jsy {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.jdtitem {
		width: 690rpx;
		height: 620rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		padding: 38rpx 24rpx;
	}

	.nxiang {
		width: 8rpx;
		height: 32rpx;
		background: linear-gradient(180deg, #EBF6F6 0%, #27CCBB 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 16rpx;
	}

	.yyysfb {
		font-weight: 800;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.85);
	}

	.zzyyaa {
		width: 152rpx;
		height: 64rpx;
		background: #FAFAFA;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 10rpx;
	}

	.yyymm {
		width: 56rpx;
		height: 48rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-weight: 400;
		font-size: 24rpx;
		margin-right: 10rpx;
	}

	.zzzmm {
		width: 56rpx;
		height: 48rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #27CCBB;
	}

	.bbhh {
		margin-top: 40rpx;
		margin-bottom: 20rpx;
	}

	.namet {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.85);
	}

	.bfbb {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
	}
</style>